import React from 'react';
import { message } from 'antd';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import Api from 'Utils/api';
import DOCUMENT_TYPE from 'Constants/documentType';
import { BROWSER_MODE } from 'Constants/webConstants';
import { RESOURCE_HOST } from '../../../../constants/config';
import { formatUtcTime } from '../../../../utils/index';
import './index.scss';


class NormalWorkPage extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],

      // 分页信息
      pageSize: 10000,
      totalCount: 0,
      currentPage: 1,
    };

    this.initList = ::this.initList;
  }
  componentDidMount() {
    this.initSwiper();
    this.initList();
  }
  initSwiper() {
    const self = this;
    const { mode } = this.props;
    this.isVertical = BROWSER_MODE.isVertical(mode);
    this.mySwiper = new Swiper('.swiper-container', {
      paginationClickable: false,
      centeredSlides: true,
      slidesPerView: this.isVertical ? 3 : 3,
      initialSlide: 2,
      watchActiveIndex: true,
      grabCursor: true,
      spaceBetween: this.isVertical ? 0 : 0,
      autoplay: 10000,
      autoplayDisableOnInteraction: false,
      loop: true,
      direction: this.isVertical ? 'vertical' : 'horizontal',
      prevButton: '.swiper-button-prev',
      nextButton: '.swiper-button-next',
      preventClicks: false,
      onClick: (swipper) => {
        this.props.dispatch(routerActions.push(`/display/work/report/${self.state.dataSource[swipper.realIndex].id}`));
      }
    });
  }
  initList() {
    const { pageSize, currentPage } = this.state;

    const query = {};
    query.limit = pageSize;
    query.offset = (currentPage - 1) * pageSize;

    const api = new Api({
      method: 'GET',
      path: `/documents/user/list/${DOCUMENT_TYPE.WORK}`,
      query,
      success: (json) => {
        this.setState({
          dataSource: json.data_list,
        }, () => {
          this.renderWork();
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  renderWork() {
    const work = this.state.dataSource;
    for (let i = 0, len = work.length; i < len; i++) {
      const node = `<div class="swiper-slide" id=${`${work[i].id}`}>
          <div class="content-wrap">
            <div class="swiper-content">
               <div class="img-wrap">
                ${work[i].media ? `<img src=${RESOURCE_HOST}${work[i].media} alt="日常工作图片" />` : ''}
               </div>
              <div class="title">
                ${work[i].title || ''}
              </div>
              <div class="time-author">
                <span class="label">
                  发布时间：${work[i].modify_time ? formatUtcTime(work[i].modify_time) : ''}
                </span>
              </div>
            </div>
          </div>
        </div>`;
      this.mySwiper.appendSlide(node);
    }
    this.mySwiper.updateSlidesSize();
  }
  render() {
    if (this.isVertical) {
      return (
        <div className="v-normal-work-wrapper">
          <div className="swiper" id="swiper" >
            <div className="swiper-container">
              <div className="swiper-wrapper" />
            </div>
            <div className="pagination" />
          </div>
          <div className="swiper-button-prev" />
          <div className="swiper-button-next" />
        </div>
      );
    }
    return (
      <div className="normal-work-wrapper">
        <div className="swiper" id="swiper" >
          <div className="swiper-container">
            <div className="swiper-wrapper" />
          </div>
          <div className="pagination" />
        </div>
        <div className="swiper-button-prev" />
        <div className="swiper-button-next" />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.webReducer
  };
}
export default connect(mapStateToProps)(NormalWorkPage);
